<h2>Why is this an issue?</h2>
<p>JSX fragments is a feature that allows you to group multiple elements together without adding an extra DOM element. They are a way to return
multiple elements from a component’s render method without requiring a wrapping parent element.</p>
<p>However, a fragment is redundant if it contains only one child, or if it is the child of an HTML element.</p>
<pre data-diff-id="1" data-diff-type="noncompliant">
&lt;&gt;&lt;Foo /&gt;&lt;/&gt;;    // Noncompliant: The fragment has only one child
&lt;p&gt;&lt;&gt;foo&lt;/&gt;&lt;/p&gt;; // Noncompliant: The fragment is the child of the HTML element 'p'
</pre>
<p>You can safely remove the redundant fragment while preserving the original behaviour.</p>
<pre data-diff-id="1" data-diff-type="compliant">
&lt;Foo /&gt;;
&lt;p&gt;foo&lt;/p&gt;;
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-react">eslint-plugin-react</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/jsx-no-useless-fragment.md">jsx-no-useless-fragment</a> </li>
  <li> React Documentation - <a href="https://react.dev/reference/react/Fragment">Fragments</a> </li>
</ul>
